<%--<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>--%>
<%--<%@ page import="java.sql.*" %>--%>
<%--<%String username=(String)session.getAttribute("username"); %>--%>
<%--<!DOCTYPE html>--%>
<%--<html>--%>
<%--<head>--%>
<%--<style type="text/css">--%>
<%--@import url(css/Nevagation.css);--%>
<%--@import url(css/ProfileStyle.css);--%>
<%--.div1{--%>
<%--   border:none;--%>
<%--   border-radius:20px;--%>
<%--   background-color:white;--%>
<%--}--%>

<%--.bt1{--%>
<%--    background:url(image/plus.png);--%>
<%--    background-repeat:no repeat;--%>
<%--    background-size:30px 30px;--%>
<%--    padding:10px;--%>
<%--    width:30px;--%>
<%--    height:30px;--%>
<%--    border:none;--%>
<%--}--%>

<%--.bt1:hover{--%>
<%--    background:url(image/plus-hover.png);--%>
<%--    background-repeat:no repeat;--%>
<%--    background-size:30px 30px;--%>
<%--    padding:10px;--%>
<%--    width:30px;--%>
<%--    height:30px;--%>
<%--    border:none;--%>
<%--}--%>

<%--.bt2{--%>
<%--    background:url(image/delete.png);--%>
<%--    background-repeat:no repeat;--%>
<%--    background-size:30px 30px;--%>
<%--    padding:10px;--%>
<%--    width:30px;--%>
<%--    height:30px;--%>
<%--    border:none;--%>
<%--}--%>

<%--.bt2:hover{--%>
<%--    background:url(image/delete-hover.ico);--%>
<%--    background-repeat:no repeat;--%>
<%--    background-size:30px 30px;--%>
<%--    padding:10px;--%>
<%--    width:30px;--%>
<%--    height:30px;--%>
<%--    border:none;--%>
<%--}--%>

<%--label{--%>
<%--     margin-right:100px;--%>
<%--     font-family:QS-M;--%>
<%--     font-size:30px;--%>
<%--}--%>

<%--.file {--%>
<%--float: left;--%>
<%--position: relative;--%>
<%--width: 270px;--%>
<%--height: 40px;--%>
<%--padding:5px;--%>
<%--}--%>

<%--.file input {--%>
<%--position: absolute;--%>
<%--left: 3px;--%>
<%--top: 3px;--%>
<%--display: none;--%>
<%--}--%>

<%--.fileName {--%>
<%--position: absolute;--%>
<%--margin-left:10px;--%>
<%--bottom: 12px;--%>
<%--width: 160px;--%>
<%--font: 20px QS-M;--%>
<%--text-align: left;--%>
<%--white-space: nowrap;--%>
<%--overflow: hidden;--%>
<%--text-overflow: ellipsis;--%>
<%--}--%>

<%--.fileShow {--%>
<%--border: none;--%>
<%--background-color: lightblue;--%>
<%--}--%>

<%--.fileShow input {--%>
<%--  display: block;--%>
<%--}--%>

<%--.fileClick{--%>
<%--    background-color:"rgba(157,157,157,.35)";--%>
<%--	}--%>

<%--.bt{--%>
<%--cursor:pointer;--%>
<%--background:url(image/Folder.ico); --%>
<%--background-repeat: no repeat; --%>
<%--background-size:35px 35px;--%>
<%--margin-left:5px; --%>
<%--height:35px; --%>
<%--width:35px; --%>
<%--border:none;--%>
<%--}--%>

<%--.btchosen{--%>
<%--background:url(image/folderb.png); --%>
<%--background-repeat: no repeat; --%>
<%--background-size:35px 35px;--%>
<%--margin-left:5px; --%>
<%--height:35px; --%>
<%--width:35px; --%>
<%--border:none;--%>
<%--}--%>

<%--</style>--%>
<%--<script type="text/javascript">--%>
<%--        window.onload = function(){--%>
<%--        	var username = "<%=username%>";--%>
<%--        	alert(username);--%>
<%--            var creat = document.querySelector('.creat');--%>
<%--            var del = document.querySelector('.del');--%>
<%--            var wrap = document.querySelector('.wrap');--%>
<%--            var count=0;--%>
<%--            var div_ls = document.getElementsByTagName('button')--%>


<%--            creat.onclick = function(){--%>
<%--                count++;--%>
<%--                var i=[]--%>
<%--                var file = document.createElement('div');--%>
<%--                var fileName = getFileName();--%>
<%--                file.className = "file";--%>
<%--                file.innerHTML = '<button class="bt" name="button" ></button><input type="checkbox" name="" style="margin-top:-8.5px;margin-left:230px"><text id="text" class="fileName" contenteditable>'+fileName+'</span>';--%>

<%--                var check = file.querySelector('input[type = "checkbox"]');--%>
<%--                var fileName = file.querySelector('.fileName');--%>
<%--                var btn=file.querySelector('button');--%>
<%--                btn.id=count;--%>
<%--                btn.name="button";--%>
<%--                file.id="folder"+count;--%>

<%--                file.onmouseover = function(){--%>
<%--                	this.className = "file fileShow";--%>
<%--                };--%>

<%--                file.onmouseout= function(){--%>
<%--                    if(!check.checked){--%>
<%--                        this.className = "file";--%>
<%--                    }--%>
<%--                };--%>

<%--                btn.onclick=function(){--%>
<%--                    for(var i=0;i<div_ls.length;i++){--%>
<%--                        if(div_ls[i].getAttribute('name') == 'button'){--%>
<%--                            div_ls[i].setAttribute('class', 'bt')--%>
<%--                        }--%>
<%--                    }--%>

<%--                    var h = document.getElementById(btn.id);--%>
<%--                    h.className = 'btchosen';--%>

<%--                }--%>

<%--                fileName.onblur = function(){--%>
<%--                    if(this.innerHTML.trim() == ""){--%>
<%--                        alert("Folder name can not be null!");--%>
<%--                        this.focus();--%>
<%--                        return;--%>
<%--                    }--%>
<%--                    var fileNames = document.querySelectorAll('.fileName');--%>
<%--                    for(var i = 0; i < fileNames.length; i++){--%>
<%--                        if(this != fileNames[i]&&this.innerHTML == fileNames[i].innerHTML){--%>
<%--                            alert("folder name has already exists, please rename it!");--%>
<%--                            this.focus();--%>
<%--                        }--%>
<%--                    }--%>
<%--                };--%>

<%--                wrap.appendChild(file);--%>
<%--            };--%>

<%--            del.onclick = function(){--%>
<%--                count--;--%>
<%--                var fileName = wrap.querySelectorAll('input:checked+.fileName');--%>
<%--                var input = wrap.getElementsByTagName("input")--%>
<%--                for(var i = 0; i < fileName.length; i++){--%>
<%--                    wrap.removeChild(fileName[i].parentNode);--%>
<%--                }--%>
<%--                console.log(fileName);--%>
<%--            };--%>

<%--            function getFileName(){--%>
<%--                var fileName = "untitled folder";--%>
<%--                var fileNameLast = "";--%>
<%--                var fileNames = wrap.querySelectorAll('.fileName');--%>
<%--                if(fileNames.length == 0){--%>
<%--                    return fileName;--%>
<%--                }--%>

<%--                var names = [];--%>
<%--                for(var i = 0; i < fileNames.length; i++){--%>
<%--                    names.push(fileNames[i].innerHTML);--%>
<%--                }--%>

<%--                names = names.filter(function(val){--%>
<%--                    var startName = val.substr(0,15);--%>
<%--                    if(startName != "untitled folder"){--%>
<%--                        return false;--%>
<%--                    }--%>

<%--                    var lastName = val.substr(15);--%>
<%--                    if(isNaN(lastName)){--%>
<%--                        return false;--%>
<%--                    }--%>
<%--                    return true;--%>
<%--                });--%>
<%--                names.sort(function(a,b){--%>
<%--                    return a.substr(15) - b.substr(15);--%>
<%--                });--%>
<%--                console.log(names);--%>
<%--                for(var i = 0; i < names.length; i++){--%>
<%--                    if(names[0] != fileName){--%>
<%--                        return fileName;--%>
<%--                    }--%>
<%--                    if(i>0 && names[i] != fileName+(i+1)){--%>
<%--                        return fileName+(i+1);--%>
<%--                    }--%>
<%--                }--%>

<%--                fileNameLast = names.length + 1;--%>
<%--                fileName += fileNameLast;--%>
<%--                return fileName;--%>
<%--            }--%>
<%--        };--%>
<%--</script>--%>
<%--<meta charset="UTF-8">--%>
<%--<title>Drive</title>--%>
<%--</head>--%>
<%--<body>--%>
<%--    <ul>--%>
<%--      <li style="margin-right:130px;margin-left:30px;"><img src="image/logo1.png" style="width:100px;height:60px;padding-top:10px;"></li>--%>
<%--      <li><a href="Profile-L.jsp">Home</a></li>--%>
<%--      <li><a href=" ">Course board</a></li>--%>
<%--      <li><a href=" ">Timetable</a></li>--%>
<%--      <li><a href=" ">Grades</a></li>--%>
<%--      <li><a href="Drive-L.jsp" style="color:#004aad">Drive</a></li>--%>
<%--      <li><img src="image/user.png" style="width:50px;height:60px;margin-left:110px;padding-top:10px;"></li>--%>
<%--   </ul>--%>
<%-- --%>
<%--<div style="height:650px;width:280px;position:fixed;margin-left:30px;" class="div1">--%>
<%--     <div style="margin-left:20px;margin-top:30px;float:left" ><img src="image/home.ico" style="width:50px;height:50px;"></div>--%>
<%--     <div style="float:left;font-family:Muli-B;margin-left:10px;margin-top:40px;font-size:30px">MyFile</div>--%>
<%--    <header>--%>
<%--     <div style="float:left;margin-left:10px;margin-top:50px;"><button type="button" class="bt1 creat"></button></div>--%>
<%--     <div style="float:left;margin-left:10px;margin-top:50px;margin-bottom:20px"><button type="button" class="bt2 del"></button></div>--%>
<%--    </header>--%>
<%--    <div class="wrap" style="overflow-y:auto;width:280px;height:540px;"></div>--%>
<%--</div>--%>
<%--<h2 style="margin-left:400px;margin-top:40px;float:left;"><label>File name</label><label>File type</label><label>Time create</label></h2>--%>
<%--<button type="button" class="bt1" style="margin-top:42px;"></button>--%>
<%--<hr style="color:gray;width:870px;margin-top:10px;margin-left:380px;border:1.5px solid #d9d9d9;">--%>
<%--</body>--%>
</html>